<template>
  <div class="chat-input-container">
    <div class="input-wrapper">
      <el-input
        v-model="messageText"
        type="textarea"
        :rows="2"
        resize="none"
        placeholder="给 博识智库 发送消息"
        @keydown.enter="handleEnterPress"
        class="message-input"
      />
      <div class="send-button-container">
        <el-button
          type="primary"
          circle
          @click="sendMessage"
          :disabled="!messageText.trim()"
          :loading="loading"
          class="send-button"
        >
          <el-icon><Promotion /></el-icon>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Promotion } from '@element-plus/icons-vue';

export default {
  name: 'ChatInput',
  
  components: {
    Promotion
  },
  
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },
  
  setup(props, { emit }) {
    const messageText = ref('');
    
    const sendMessage = () => {
      if (!messageText.value.trim() || props.loading) return;
      
      emit('send', messageText.value);
      messageText.value = '';
    };
    
    const handleEnterPress = (event) => {
      if (event.shiftKey) {
        // Shift+Enter换行，允许默认行为
        return;
      } else {
        // 仅Enter键发送消息并阻止默认行为
        event.preventDefault();
        sendMessage();
      }
    };
    
    return {
      messageText,
      sendMessage,
      handleEnterPress
    };
  }
}
</script>

<style scoped>
.chat-input-container {
  border-top: 1px solid #e0e0e0;
  background-color: #fff;
  padding: 16px;
}

.input-wrapper {
  position: relative;
}

.message-input {
  width: 100%;
}

:deep(.el-textarea__inner) {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 12px 50px 12px 12px;
  font-size: 14px;
  resize: none;
}

.send-button-container {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
}

.send-button {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  min-height: 40px;
}

:deep(.send-button .el-icon) {
  font-size: 18px;
}
</style> 